import { Badge, TabBar } from 'antd-mobile';
import { AppOutline, AppstoreOutline, UserOutline, ShopbagOutline } from 'antd-mobile-icons';
import React, { Component } from 'react';
import { Route } from 'react-router-dom';

import '../styles/Index.scss'

import Home from './index/Home';

class index extends Component {
  state = {
    tabs: [
      {
        key: '/home',
        title: '首页',
        icon: <AppOutline />,
        badge: Badge.dot,
      },
      {
        key: '/cate',
        title: '分类',
        icon: <AppstoreOutline />,
        // badge: Badge.dot,
      },
      {
        key: '/car',
        title: '购物车',
        icon: <ShopbagOutline />,
        // badge: Badge.dot,
      },
      {
        key: '/mine',
        title: '我的',
        icon: <UserOutline />,
        // badge: Badge.dot,
      }
    ]
  }
  render() {
    return (
      <div className='index'>
        <div className="main">
          <Route path='/index/home' component={Home} />
        </div>
        <div className="tabbar">
          <TabBar>
            {this.state.tabs.map(item => (
              <TabBar.Item
                key={item.key}
                icon={item.icon}
                title={item.title}
                badge={item.badge}
              />
            ))}
          </TabBar>
        </div>
      </div>
    );
  }
}

export default index;